
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                td{
                    padding:20px 40px;
                }
                table tr:nth-child(odd){
                    background:rgb(103, 9, 9);
                }
                table tr:nth-child(even){
                    background:#fcb;
                }
                table,td{
                    border-coliapse:collapse;
                    border: 1px;
                }
            </style>
        </head>
        <body>
        <table>
           <tr>
              <td></td><td></td><td></td>
           </tr>
           <tr>
              <td></td><td></td><td></td>
           </tr>
           <tr>
           <td></td><td></td><td></td>
           </tr> 
        </table>
        <script>
            let tds = document.querySelectorAll('td');
            tds.forEach(i => {
                i.onclick = function(){
                    this.style.background = '#222';
                }
            })
        </script>
        <!--决对路径-->
        <a href="https://www.baidu.com">百度</a>
        <a href="//jd.com">京东</a>
        <a href="/eath">搜索</a>
        <!--相对路径-->
        <a href="./css/app.css">访问css</a>
        <a href="js/app.js">访问js</a>
        <a  href="../imge">访问image</a>
        <a href="../../video">访问video</a>
        </body>
    </html>
 

